<template>
    <div class="page">
        <div class="bread" >
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/product/trademark' }">需求信息</el-breadcrumb-item>
                <el-breadcrumb-item>需求详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainbox" >
            <!-- 介绍 -->
            <div class="mainbox_top u-p-40">
                <img :src="demdetail.demImage?.path" alt="">
                <div class="mainbox_top_right u-m-l-20">
                    <div class="mainbox_top_right_top">
                        <div>
                            <p class="title">{{demdetail.achName}}</p>
                            <p class=" belong u-m-t-10">所属单位或公司名称：{{demdetail.company}}</p>
                        </div>
                        <!-- <div class="twobtn">
                            <p class="collect pointer">
                                收藏
                            </p>
                            <p class="liuyan u-m-l-10 pointer">
                                我要留言
                            </p>
                        </div> -->
                    </div>
                    <div class="mainbox_top_right_content">
                        <div class="u-m-tb-10 mainbox_top_right_content_item">
                            <p class="samewidth hidden-one">技术领域：
                                <span v-for="i in demdetail.field">{{ i }},</span>
                            </p>
                            <p class="samewidth hidden-one">合作方式：
                                <span v-for="i in demdetail.cooperateType" >{{ i }},</span>
                            </p>
                            <p class="samewidth">单位性质：{{demdetail.companyType}}</p>
                        </div>
                        <div class="mainbox_top_right_content_item">
                            <p class="samewidth">预算金额：{{demdetail.finance}}</p>
                            <p class="samewidth">需求类型：{{demdetail.demType}}</p>
                            <p class="samewidth">所属地区：{{demdetail.province}}</p>
                        </div>
                        <div class="u-m-tb-10 mainbox_top_right_content_item">
                            <p class="samewidth">有效期：{{demdetail.lifespan}}</p>
                            <p class="samewidth">更新时间：{{demdetail.updateTime}}</p>
                            <p class="samewidth">信息来源：站内</p>
                        </div>
                        <!-- <div class="mainbox_top_right_content_item">
                            <p class="samewidth">更新时间：2023-3-13 19：08：57</p>
                            <p class="samewidth">信息来源：站内</p>
                        </div> -->
                    </div>
                </div>
            </div>
            <el-divider />
            <!-- 需求详情 -->
            <div class="reasultdetail ">
                <div class="title">需求详情</div>
                <p class="u-m-tb-20">
                    {{ demdetail.demDetail }}
                </p>
            </div>
            <el-divider />
            <!-- 相关成果 -->
            <div class="aboutrequire">
                <div class="title">
                    相关成果
                </div>
                <div class="aboutrequirebox u-m-tb-20">
                    <div class="aboutrequirebox_item pointer u-p-20" @click="toachdetail(i.id)" v-for="i in achlist">
                        <!-- <img :src="i.achImage.path" alt=""> -->
                        <el-image class="elimg" :src="i.achImage.path" fit="cover" />
                        <p class="title u-m-tb-10">{{i.achName}}</p>
                        <p class="grey">合作方式：100万</p>
                        <p class="grey u-m-tb-10">项目阶段：啊口水都快</p>
                    </div>
                </div>
            </div>
            <el-divider />
            <!-- 相关专家 -->
            <div class="aboutrequire">
                <div class="title">
                    相关专家
                </div>
                <div class="aboutrequirebox u-m-tb-20">
                    <div class="contentitem pointer" @click="topeopledetail(item.id)"v-for="(item, index) in teacherlist">
                        <img src="../../assets/首页/tecpeople.png" alt="">

                        <div class="contentitem_text u-m-l-20">
                            <p class="name">{{item.name}}</p>
                            <p class="level u-m-tb-20">{{item.post}}</p>
                            <p class="level">{{item.enterprise}}</p>

                        </div>
                    </div>
                </div>
            </div>
            <el-divider />
            <!-- 相关机构 -->
            <div class="aboutrequire">
                <div class="title">
                    相关机构
                </div>
                <div class="aboutrequirebox u-m-tb-20">
                    <div class="aboutrequirebox_item u-p-20" v-for="i in 4">
                        <el-image class="elimg" src="../../assets/首页/daogu.png" fit="cover" />
                        <p class="title u-m-tb-10">阿斯顿</p>
                        <p class="grey">技术领域：电子信息技术</p>
                        <p class="grey u-m-tb-10">单位性质：大专郑州</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted,getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
import {getdemdetail} from '@/api/user/index'
const route = useRoute()
onMounted(() => {
   
})
const { proxy } = getCurrentInstance() as any;;

const toachdetail = (id:any) => {
    proxy.$router.push({
        path: '/acl/achievementdetail',
        query: {
            id: id
        }
    })
}

const topeopledetail = (id:any) => {
    proxy.$router.push({
        path: '/product/peopledetail',
        query: {
            id: id
        }
    })
}

//相关专家
const teacherlist:any = ref([])
function getteacherlist() {
  proxy.$get('/user/list/teacher', {
    current: 1,
    limit: 3,
    field: '' ,
  }).then((res: any) => {
    teacherlist.value = res.data.records
  })
}

getteacherlist()


//相关成果
const achlist:any = ref([])
function getachlist() {
  proxy.$get('/ach/list', {
    current: 1,
    limit:4,
  }).then((res: any) => {
    res.data.records.map(item=>{
        return item.achImage = JSON.parse(item.achImage)
    })
    achlist.value = res.data.records
  })
}

getachlist()


const demdetail:any = ref({})
const getdemdetaildata = async () => {
    const res = await getdemdetail( route.query.id )
    demdetail.value = res.data
}
getdemdetaildata()

</script>
<style lang="scss" scoped>
@mixin flex {
    display: flex;
    align-items: center;
}

.page {
    background: rgb(250, 248, 259);
    width: 100%;
    padding-top: 30px;


    .bread {
        width: 1180px;
        box-sizing: border-box;
        margin: 0px auto;
    }
}

.mainbox {
    width: 1180px;
    margin: 20px auto;

    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;

    .title {
        font-size: 20px;
        font-weight: bold;
    }

    .mainbox_top {
        @include flex();
        box-sizing: border-box;

        img {
            width: 200px;
            height: 140px;
        }

        .mainbox_top_right {
            width: calc(100% - 200px);
        }

        .mainbox_top_right_top {
            @include flex();
            justify-content: space-between;
            width: 100%;



            .twobtn {
                color: #fff;
                text-align: center;
                font-size: 14px;
                @include flex;

                .collect {
                    background-color: rgb(254, 130, 9);
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                }

                .liuyan {
                    background-color: rgb(5, 96, 263);
                    width: 80px;
                    height: 30px;
                    line-height: 30px;

                }
            }

        }

        .mainbox_top_right_content {
            font-size: 14px;

            .mainbox_top_right_content_item {
                display: flex;

                .samewidth {
                    width: 350px;
                }
            }
        }
    }

    .reasultdetail {
        padding: 0 40px;

        p {
            font-size: 14px;
        }
    }

    .aboutrequire {
        padding: 0 40px;

        .aboutrequirebox {
            @include flex();
            justify-content: space-between;
            .aboutrequirebox_item {
                box-shadow: 1px 1px 10px 1px #efefef;

                .elimg {
                    width: 190px;
                    height: 130px;
                }
               
                .grey {
                    color: #999;
                    font-size: 14px;
                }
            }
        }

        .contentitem {
            padding: 20px;
            margin: 20px;
            background: url('../../assets/首页/technology.png');
            width: 30%;
            background-size: 100% 100%;
            display: flex;
        }

        img {
            width: 100px;
            height: 130px
        }
      
    

        .contentitem_text {
            font-size: 16px;

            .level {
                color: #999;
            }
        }
    }
}
</style>